<template>
	<view class="uni-flex-column container">
		<view class="content">
			<view class="h1">一、服务定义</view>
			<view class="h2">
				“极速维权”是[零付用工服务]为信用良好的服务需求方（甲方）提供的专属争议解决通道，当甲方对服务提供方（乙方）交付的服务质量、履约行为存在争议时，可申请平台优先介入处理。
			</view>
			<view class="h1">二、适用场景</view>
			<view class="h2">服务争议类型：</view>
			<view class="h2">1. 乙方未按约定时间/标准完成服务</view>
			<view class="h2">2. 服务成果与合同约定严重不符</view>
			<view class="h2">3. 服务过程中存在违规行为（如私自转包、虚假履历等）</view>
			<view class="h2">4. 其他经平台认定的服务违约情形</view>
			<view class="h2">不适用范围：</view>
			<view class="h2">货物类商品退款（本平台不涉及实物交易）</view>
			<view class="h2">非服务相关的纠纷（如账号使用问题）</view>
			<view class="h1">三、申请条件</view>
			<view class="table-container">
				<view class="table-row header-row">
					<view class="table-cell header">要素</view>
					<view class="table-cell header">要求</view>
				</view>
				<view class="table-row">
					<view class="table-cell">时间要求</view>
					<view class="table-cell">需在服务结束后的48小时内提出</view>
				</view>
				<view class="table-row">
					<view class="table-cell">举证材料</view>
					<view class="table-cell">
						需提供以下至少一项：
						<view class="table-cell-text">• 服务合同/协议条款截图</view>
						<view class="table-cell-text">• 乙方违约的沟通记录</view>
						<view class="table-cell-text">• 服务成果与约定差异的证明文件</view>
					</view>
				</view>
			</view>
			<view class="h1">四、特别规则</view>
			<view class="h2">服务分级处置：</view>
			<view class="h2">争议金额≤500元：系统自动审核</view>
			<view class="h2">争议金额＞500元：人工仲裁</view>
			<view class="h2">信用联动机制：</view>
			<view class="h2">甲方滥用维权：扣减信用分并限制功能</view>
			<view class="h2">乙方违约成立：计入服务商诚信档案</view>
			<view class="h1">五、注意事项</view>
			<view class="h2">以下情况可能影响维权成功率：</view>
			<view class="h2">• 甲方单方面修改需求未获乙方确认</view>
			<view class="h2">• 因不可抗力导致的履约延迟</view>
			<view class="h2">对仲裁结果不满可发起申诉，需在XX个工作日内提交新证据</view>
			<view class="h1">六、责任声明</view>
			<view class="h2">平台作为中立仲裁方，不参与具体服务实施。对以下情况不承担责任：</view>
			<view class="h2">• 乙方因资质造假引发的纠纷</view>
			<view class="h2">• 甲方与乙方私下达成的补充协议</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const info = reactive({
		orderId: ''
	});

	onLoad((option) => {
		console.log(option, 'option');
	});
</script>

<style lang="scss" scoped>
	.container {
		background: #ffffff;
		height: 100vh;
		box-sizing: border-box;

		.content {
			flex: 1;
			padding: 25rpx 25rpx 60rpx;
			overflow-y: auto; // 允许滚动

			.h1 {
				line-height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 32rpx;
				font-weight: 500;
				color: #303133;
				margin: 15rpx 0rpx;
			}

			.h2 {
				line-height: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				font-weight: 500;
				color: #303133;
			}

			// 表格容器
			.table-container {
				display: table;
				width: 100%;
				border-collapse: collapse; // 关键：合并边框，让边框之间没有间隙
				margin-top: 20rpx;
				position: relative; // 为伪元素定位提供参考

				// 表格行
				.table-row {
					display: table-row;

					// 表格单元格
					.table-cell {
						display: table-cell;
						padding: 20rpx 30rpx; // 增加内边距，让内容不贴边
						font-family: PingFangSC, PingFang SC;
						font-size: 28rpx;
						color: #303133;
						position: relative; // 为伪元素定位

						// 单元格内的文本
						.table-cell-text {
							margin-top: 15rpx;
						}

						// 使用伪元素来画边框，这是最稳定的方法
						// 上边框
						&::before {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							height: 1rpx; // 使用1rpx确保在高分屏上可见
							background-color: #e5e5e5;
						}

						// 左边框
						&::after {
							content: '';
							position: absolute;
							top: 0;
							left: 0;
							width: 1rpx;
							height: 100%;
							background-color: #e5e5e5;
						}
					}

					// 表头单元格，去掉上边框和左边框，因为表格的顶部和左边已经有边框了
					&.header-row .table-cell.header {
						// &::before {
						// 	display: none;
						// }

						// &::after {
						// 	display: none;
						// }

						font-weight: 500;
						// background-color: #f8f8f8; // 给表头加个背景色，更美观
					}
				}

				// 为整个表格容器添加右边框和下边框
				&::after {
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 1rpx;
					height: 100%;
					background-color: #e5e5e5;
				}

				&::before {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 1rpx;
					background-color: #e5e5e5;
				}
			}
		}
	}
</style>